<template>
    <div class="common-layout">
      <el-container>
        
        <el-aside style="width: 250px;height:100vh;background-color: #545c64;overflow: hidden;">
          <div style="width:100%;height: 80px; background-color: #545c64; text-align: center; line-height: 60px; color: #fff;font-size:xx-large;" >
              学校管理logo
            </div>
            <div style="width:225px;height: 30px; background-color: #545c64; text-align: left; line-height: 30px; color: #fff;padding-left: 25px;">
              <el-icon><HomeFilled /></el-icon>
              首页
            </div>
          <el-col :span="250">
            
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
              default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>教务管理</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/jiao')
                  }">基础信息维护</el-menu-item>
                  <el-menu-item >教师管理</el-menu-item>
                  <el-menu-item index="1-2">学生管理</el-menu-item>
                  <el-menu-item index="1-2">班级管理</el-menu-item>
                  <el-menu-item index="1-2">主任维护</el-menu-item>
                  <el-menu-item index="1-2">排课管理</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>走班排课</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/zouban')
                  }">选课设置</el-menu-item>
                  <el-menu-item index="2-2">智能分班</el-menu-item>
                  <el-menu-item index="2-3">走班排课</el-menu-item>
                  
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>备课管理</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/bei')
                  }">个人备课</el-menu-item>
                  <el-menu-item index="3-2">备课组管理</el-menu-item>
                  <el-menu-item index="3-2">备课示例</el-menu-item>
                  
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>作业管理</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/zuoye')
                  }">作业管理</el-menu-item>
                  <el-menu-item index="4-2">作业统计</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>资源管理</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/zi')
                  }">教学资源管理</el-menu-item>
                  <el-menu-item index="5-2">课外资源管理</el-menu-item>
                  <el-menu-item index="5-3">资源类型管理</el-menu-item>
                  
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>配置管理</span>
                </template>
                
                  <el-menu-item @click="()=>{
                      $router.push('/shou/pei')
                  }">学年学科配置</el-menu-item>
                  <el-menu-item index="6-2">学年学期配置</el-menu-item>
                  <el-menu-item index="6-2">教材管理配置管理</el-menu-item>
                  <el-menu-item index="6-2">教案模版配置</el-menu-item>
                  
              </el-sub-menu>
              <el-sub-menu index="7">
                <template #title>
                  <el-icon><WalletFilled /></el-icon>
                  <span>系统管理</span>
                </template>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-container>
          <el-header>
            <div
              style="width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center">
              <div
                style="width: 160px;height: 100%;display: flex;justify-content: space-between;align-items: center;font-size:large;">
                <el-icon style="font-size: larger;">
                  <Fold />
                </el-icon>
                <p style="font-size: larger;">学校管理系统</p>
              </div>
              <div
                style="width: 140px;height: 100%;display: flex;justify-content: space-between;align-items: center;font-size:large;margin-right: 40px;">
                <div style="line-height: 10px;">
                  <el-image :src="userimg" style="width: 40px;height: 40px;border-radius: 50%;" />
  
                </div>
                <div style="text-align: center;line-height: 10px;margin-right: 20px">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <span style="font-size: larger;">{{ username }}</span>
                      <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>查看信息</el-dropdown-item>
                        <el-dropdown-item divided>退出登录</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup>
  const userimg = localStorage.getItem('userimg') ?
    localStorage.getItem('userimg') :
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  const username = localStorage.getItem('username') ?
    localStorage.getItem('username') :
    '用户名'
  </script>
  
  <style scoped>
  .el-header {
    width: 100%;
    height: 80px;
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .example-showcase .el-dropdown-link {
    font-size: larger;
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  </style>